<template>
  <div class="question-management">
    <!-- 标题区 -->
    <div class="header-section">
      <h1>题目管理</h1>
      <!-- 修改点击事件为 openCreateDialog -->
      <button class="new-question-btn" @click="openCreateDialog">
        <i class="material-icons">add</i>新建题目
      </button>
    </div>

    <!-- 筛选搜索区 -->
    <div class="filter-section">
      <div class="filter-controls">
        <select class="filter-select" v-model="filter.knowledge">
          <option value="">全部知识点</option>
          <option v-for="item in knowledgeOptions" :key="item" :value="item">{{item}}</option>
        </select>
        <select class="filter-select" v-model="filter.type">
          <option value="">全部类型</option>
          <option v-for="type in typeOptions" :key="type" :value="type">{{type}}</option>
        </select>
        <select class="filter-select" v-model="filter.difficulty">
          <option value="">全部难度</option>
          <option v-for="level in difficultyOptions" :key="level" :value="level">{{level}}</option>
        </select>
      </div>
      <div class="search-box">
        <input type="text" v-model="searchText" placeholder="根据 id 搜索题目...">
      </div>
    </div>

    <!-- 题目列表区 -->
    <div class="question-table">
      <table>
        <thead>
          <tr>
            <th>题目ID</th>
            <th>题目内容</th>
            <th>题目类型</th>
            <th>难度</th>
            <th>关联知识点</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(question, index) in filteredQuestions" :key="question.id" :class="{'even-row': index % 2 === 0}">
            <td>{{question.id}}</td>
            <td>{{question.content}}</td>
            <td>{{question.type}}</td>
            <td>{{question.difficulty}}</td>
            <td>{{question.knowledge}}</td>
            <td class="action-buttons">
              <button class="edit-btn" @click="editQuestion(question.id)">
                <i class="material-icons">edit</i>
              </button>
              <button class="delete-btn" @click="deleteQuestion(question.id)">
                <i class="material-icons">delete</i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页部分 - 已移动到表格下方 -->
    <div class="pagination">
      <div class="page-size">
        <span>显示</span>
        <select>
          <option>10</option>
          <option>20</option>
          <option>50</option>
        </select>
        <span>条/页</span>
      </div>
      <div class="page-nav">
        <button class="prev-btn">上一页</button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="next-btn">下一页</button>
      </div>
      <div class="page-info">
        <span>共 5 页</span>
      </div>
      <div class="page-jump">
        <button class="jump-btn">跳转</button>
      </div>
    </div>

    <!-- 新建题目对话框 -->
    <div class="create-dialog" v-if="showCreateDialog">
      <div class="dialog-overlay" @click="cancelCreate"></div>
      <div class="dialog-content">
        <h3>新建题目</h3>
        <div class="form-group">
          <label>题目ID</label>
          <input type="text" v-model="newQuestion.id">
        </div>
        <div class="form-group">
          <label>题目内容</label>
          <template>
            <div class="question-form">
              <input
                v-model="questionTitle"
                type="text"
                placeholder="输入题目标题"
                class="input-field"
              />
              
              <textarea
                v-model="questionContent"
                rows="5"
                class="textarea-field"
                placeholder="输入题目内容"
              />
            </div>
          </template>
        </div>
        <div class="form-group">
          <label>题目类型</label>
          <select v-model="newQuestion.type">
            <option value="">请选择</option>
            <option v-for="type in typeOptions" :key="type" :value="type">{{type}}</option>
          </select>
        </div>
        <div class="form-group">
          <label>题目难度</label>
          <select v-model="newQuestion.difficulty">
            <option value="">请选择</option>
            <option v-for="level in difficultyOptions" :key="level" :value="level">{{level}}</option>
          </select>
        </div>
        <div class="form-group">
          <label>关联知识点</label>
          <select v-model="newQuestion.knowledge">
            <option value="">请选择</option>
            <option v-for="item in knowledgeOptions" :key="item" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="dialog-actions">
          <!-- 保持点击事件为 cancelCreate 和 submitNewQuestion -->
          <button class="cancel-btn" @click="cancelCreate">取消</button>
          <button class="confirm-btn" @click="submitNewQuestion">确认并上传</button>
        </div>
      </div>
    </div>

    <!-- 编辑题目对话框 -->
    <div class="edit-dialog" v-if="showEditDialog">
      <div class="dialog-overlay" @click="cancelEdit"></div>
      <div class="dialog-content">
        <h3>编辑题目</h3>
        <div class="form-group">
          <label>题目ID</label>
          <div class="preview-text">{{editingQuestion.id}}</div>
        </div>
        <div class="form-group">
          <label>题目内容</label>
          <textarea v-model="editingQuestion.content"></textarea>
        </div>
        <div class="form-group">
          <label>题目类型</label>
          <select v-model="editingQuestion.type">
            <option v-for="type in typeOptions" :key="type" :value="type">{{type}}</option>
          </select>
        </div>
        <div class="form-group">
          <label>题目难度</label>
          <select v-model="editingQuestion.difficulty">
            <option v-for="level in difficultyOptions" :key="level" :value="level">{{level}}</option>
          </select>
        </div>
        <div class="form-group">
          <label>关联知识点</label>
          <select v-model="editingQuestion.knowledge">
            <option v-for="item in knowledgeOptions" :key="item" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="cancelEdit">取消</button>
          <button class="confirm-btn" @click="submitEdit">确认修改</button>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框（合并到主模板中） -->
    <div class="delete-dialog" v-if="showDeleteDialog">
      <div class="dialog-overlay" @click="cancelDelete"></div>
      <div class="dialog-content">
        <h3>确认删除题目</h3>
        <div class="form-group">
          <label>题目ID</label>
          <div class="preview-text">{{deletingQuestion.id}}</div>
        </div>
        <div class="form-group">
          <label>题目内容</label>
          <div class="preview-text">{{deletingQuestion.content}}</div>
        </div>
        <div class="form-group">
          <label>题目类型</label>
          <div class="preview-text">{{deletingQuestion.type}}</div>
        </div>
        <div class="form-group">
          <label>题目难度</label>
          <div class="preview-text">{{deletingQuestion.difficulty}}</div>
        </div>
        <div class="form-group">
          <label>关联知识点</label>
          <div class="preview-text">{{deletingQuestion.knowledge}}</div>
        </div>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="cancelDelete">取消</button>
          <button class="confirm-btn" @click="confirmDelete">确认删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue' // 重新导入 computed

// 示例数据
const questions = ref([
  {
    id: 'Q001',
    content: '计算光速飞船以 0.8c 飞行时的时间膨胀因子（要求写出推导过程）',
    type: '计算题',
    difficulty: '中等',
    knowledge: '狭义相对论 - 时间膨胀'
  },
  {
    id: 'Q002',
    content: '力的三要素是以下哪项？A. 大小、方向、作用点 B. 质量、速度、加速度',
    type: '选择题',
    difficulty: '简单',
    knowledge: '物理力学基础'
  }
])

const filter = ref({
  knowledge: '',
  type: '',
  difficulty: ''
})

const searchText = ref('')

// 筛选选项
const knowledgeOptions = ['狭义相对论 - 时间膨胀', '物理力学基础']
const typeOptions = ['计算题', '选择题', '填空题', '简答题']
const difficultyOptions = ['简单', '中等', '困难']

// 计算筛选后的题目
const filteredQuestions = computed(() => {
  return questions.value.filter(q => {
    const matchesFilter = 
      (!filter.value.knowledge || q.knowledge.includes(filter.value.knowledge)) &&
      (!filter.value.type || q.type === filter.value.type) &&
      (!filter.value.difficulty || q.difficulty === filter.value.difficulty) &&
      (!searchText.value || q.id.includes(searchText.value) || q.content.includes(searchText.value))
    return matchesFilter
  })
})

// 新增状态
const showCreateDialog = ref(false)
const newQuestion = ref({
  id: '',
  content: '',
  type: '',
  difficulty: '',
  knowledge: ''
})

// 新增编辑对话框状态
const showEditDialog = ref(false)
const editingQuestion = ref({
  id: '',
  content: '',
  type: '',
  difficulty: '',
  knowledge: ''
})

// 修改editQuestion函数
function editQuestion(id) {
  const question = questions.value.find(q => q.id === id)
  if (question) {
    editingQuestion.value = {...question}
    showEditDialog.value = true
  }
}

function submitEdit() {
  const index = questions.value.findIndex(q => q.id === editingQuestion.value.id)
  if (index !== -1) {
    questions.value[index] = {...editingQuestion.value}
  }
  showEditDialog.value = false
}

function cancelEdit() {
  showEditDialog.value = false
}

// 新增删除确认对话框状态
const showDeleteDialog = ref(false)
const deletingQuestion = ref({
  id: '',
  content: '',
  type: '',
  difficulty: '',
  knowledge: ''
})

// 修改deleteQuestion函数
function deleteQuestion(id) {
  const question = questions.value.find(q => q.id === id)
  if (question) {
    deletingQuestion.value = {...question}
    showDeleteDialog.value = true
  }
}

function confirmDelete() {
  questions.value = questions.value.filter(q => q.id !== deletingQuestion.value.id)
  showDeleteDialog.value = false
}

function cancelDelete() {
  showDeleteDialog.value = false
}

// 修改函数名避免冲突
function openCreateDialog() {
  // 重置表单
  newQuestion.value = {
    id: '',
    content: '',
    type: '',
    difficulty: '',
    knowledge: ''
  }
  showCreateDialog.value = true
}

function submitNewQuestion() {
  // 添加新题目逻辑
  questions.value.push({
    ...newQuestion.value
  })
  showCreateDialog.value = false
}

function cancelCreate() {
  showCreateDialog.value = false
}
</script>

<style scoped>
.question-management {
  padding: 2rem;
  /* background-color: #1a1a1a; */
  min-height: calc(100vh - 70px);
  color: white;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-section h1 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: white;
}

.new-question-btn {
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.new-question-btn:hover {
  background: #7c3aed;
}

.filter-section {
  background: #252525;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.filter-controls {
  display: flex;
  gap: 1rem;
}

.filter-select, .search-box input {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'Noto Sans SC', sans-serif;
  outline: none;
}

.filter-select {
  min-width: 120px;
}

.search-box input {
  width: 250px;
}

.search-box input::placeholder {
  color: #999;
}

.question-table {
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #333;
  padding: 1rem;
  text-align: left;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  color: white;
}

td {
  padding: 1rem;
  border-bottom: 1px solid #333;
  font-family: 'Noto Sans SC', sans-serif;
  color: white;
}

.even-row {
  background: rgba(255,255,255,0.02);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.edit-btn, .delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.edit-btn {
  color: #8b5cf6;
}

.delete-btn {
  color: #ff4757;
  
}

.edit-btn:hover, .delete-btn:hover {
  background: rgba(255,255,255,0.1);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem;
  background: #252525;
  border-radius: 8px;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-size select {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.5rem;
  border-radius: 4px;
}

.page-nav {
  display: flex;
  gap: 0.5rem;
}

.page-nav button {
  min-width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 4px;
  background: #333;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-nav button:hover {
  background: #3b82f6;
}

.page-nav .active {
  background: #3b82f6;
  font-weight: bold;
}

.page-info, .page-jump {
  color: #aaa;
  font-size: 0.9rem;
}

.jump-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

/* 新增对话框样式 */
.create-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
}

.dialog-content {
  position: relative;
  background: #252525;
  border-radius: 12px;
  padding: 2rem;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(139,92,246,0.3);
}

.dialog-content h3 {
  margin-top: 0;
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ddd;
  font-family: 'Noto Sans SC', sans-serif;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  background: #333;
  border: 1px solid #444;
  border-radius: 8px;
  color: white;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.confirm-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: #444;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn:hover {
  background: #ff4757;
  transform: translateY(-1px);
}

.cancel-btn:hover {
  background: #555;
  transform: translateY(-1px);
}

/* 编辑对话框样式 */
.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-text {
  padding: 0.8rem;
  background: #333;
  border-radius: 8px;
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
}

/* 删除对话框样式 */
.delete-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.delete-dialog .dialog-content {
  background: #252525;
  border: 1px solid rgba(239,68,68,0.3);
}
</style>

